<template>
  <el-breadcrumb>
    <el-breadcrumb-item>员工管理</el-breadcrumb-item>
    <el-breadcrumb-item>监督员列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-form
      :inline="true"
      :model="queryForm"
      size="small"
      style="margin-top: 20px"
      class="demo-form-inline"
  >
    <el-form-item label="电话">
      <el-input
          v-model="queryForm.telId"
          placeholder="请输入电话"
          style="width: 100px"
      />
    </el-form-item>

    <el-form-item label="姓名">
      <el-input
          v-model="queryForm.realName"
          placeholder="请输入名字"
          style="width: 100px"
      />
    </el-form-item>

    <el-form-item label="生日日期">
      <el-date-picker
          v-model="queryForm.birthday"
          type="date"
          style="width: 100px"
          placeholder="生日日期"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="danger" @click="clear">清空</el-button>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form-item>

    <el-form-item label="">
      <!--点击之后立即查询-->
      <el-radio-group v-model="queryForm.sex" @change="query">
        <el-radio label="1">男</el-radio>
        <el-radio label="0">女</el-radio>
      </el-radio-group>
    </el-form-item>

  </el-form>

  <el-table
      :data="pageResponseDto.list"
      style="width: 100%"
      :cell-style="{ padding: '4px' }"
      empty-text="无数据"
  >

    <el-table-column prop="telId" label="手机号" width="150" />
    <el-table-column prop="realName" label="姓名" />
    <el-table-column prop="password" label="密码" />
    <el-table-column prop="birthday" label="生日日期" />
    <el-table-column prop="sex" label="性别" :formatter="formatSex"/>
    <el-table-column prop="remarks" label="备注"/>


    <el-table-column label="操作" width="120">
      <template #default="scope">
        <!--        用于点击当行，会传递当行的指定数据-->
        <el-button link type="primary" size="small" @click="updateMember(scope.row.telId)">
          <el-icon title="更新员工" style="font-size: 18px">
            <Edit />
          </el-icon>
        </el-button>
        <el-button link type="primary" size="small" @click="addRemarks(scope.row.telId)">
          <el-icon title="评价员工" style="font-size: 18px">
            <Star/>
          </el-icon>
        </el-button>

      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination
        background
        small
        layout="prev, pager, next, total"
        :total="pageResponseDto.totalRow"
        :page-size="pageResponseDto.maxPageNum"
        style="margin-top: 20px"
        v-model:current-page="pageNum"
    />
  </div>
</template>

<script setup>
import {  Star, Edit } from "@element-plus/icons-vue";
import { reactive, ref, inject, watch } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const store = useStore();
const router = useRouter();
const axios = inject("axios");

const queryForm = reactive({
  telId:null,
  password:null,
  realName:null,
  birthday:null,
  sex:null,
  remarks:null,
});
const pageResponseDto = ref({});
//初始化成员列表
const listSupervisorPage = (pageNum) => {
  let param = {

    telId:queryForm.telId,
    password:queryForm.password,
    realName:queryForm.realName,
    birthday:queryForm.birthday,
    sex:queryForm.sex,
    pageNum: pageNum,
    maxPageNum: store.state.maxPageNum,
  };
  axios
      .post("supervisor/listSupervisorPage", param)
      .then((response) => {

        pageResponseDto.value = response.data;
        console.log(pageResponseDto.value);
      })
      .catch((error) => {
        console.error("Error:", error); // 打印错误信息
      });
};

//在分页组件上使用双向绑定pageNum数据，然后监听pageNum
const pageNum = ref(1);
watch(pageNum, (newValue, oldValue) => {
  listSupervisorPage(newValue);
});

const formatSex=(row, column, cellValue) =>{
  // 根据 sex 的值返回对应的性别文字
  return cellValue === 0 ? '女' : cellValue === 1 ? '男' : '未知';
}



const init = () => {
  //初始化查询反馈列表
  listSupervisorPage(1);
};
init();

const clear = () => {
      queryForm.telId=null,
      queryForm.password=null,
      queryForm.realName=null,
      queryForm.birthday=null,
      queryForm.sex=null,
      queryForm.remarks=null
};

const query = () => {
  listSupervisorPage(1);
};


//query是router的，用于附加在 URL 的末尾，以 ?key=value 的形式出现
const updateMember = (telId)=>{
  router.push({path:'/index/supervisorUpdate',query:{telId: telId}});
}

const addRemarks = (telId)=>{
  router.push({path:'/index/supervisorRemarks',query:{telId:telId}});
}
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
}
</style>